﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="../../css/default.css" rel="stylesheet" />
</head>
<body>

    
    <div id="divLogin" style="position:absolute; width: 1366px; min-width: 1366px; max-width: 1366px; height: 768px; min-height: 768px; max-height: 768px;" class="backgound-login">
        <div style="position:fixed;left:0px;top:0px;right:0px;height:200px" class="top">
            
            
        </div>
       
        <div style="position:fixed" class="body">
            <table cellpadding="0" cellspacing="0" style="width:418px">
                <tr>
                    <td>
                       
                    </td>
                </tr>
                <tr>
                    <td style="height:55px;min-height:55px">&nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <span class="font-size-level-1" style="color:#fff">{{$$$res("SignIn","Sign in")}}</span>
                    </td>
                </tr>
                <tr>
                    <td style="min-height:75px;margin:0px;padding:0px" valign="top">
                        <input id="username" class="k-textbox font-size-20" placeholder='{{$$$res("placeholderEnterUserName","Nhập username")}}' style="height: 55px; width: 100%; background-color: transparent !important; color: white !important; " ng-model="UserName" />
                    </td>
                </tr>
                <tr>
                    <td style="min-height:75px;margin:0px;padding:0px" valign="top">
                        <input id="password" type="password" placeholder='{{$$$res("placeholderEnterPassword","Nhập mật khẩu")}}' class="k-textbox font-size-20" style="height: 55px; width: 100%; background-color: transparent !important; color: white !important; border-color: #dadada; border-width: 1px; border-style: solid; " ng-model="Password" />
                    </td>
                </tr>
                <tr ng-if="isWaiting">
                    <td>
                        <progress class="indeterminate" style="width:100%;display:block"></progress>
                    </td>
                </tr>
                <tr>
                    <td align="right" style="min-height:75px;margin:0px;padding:0px" valign="top">
                        <input type="button" value='{{$$$res("btnlogin","Login")}}' ng-click="doLogin();" style="width:173px;height:55px" class="font-size-20" />
                    </td>
                </tr>

            </table>
        </div>
    </div>
    <div id="language" style="position:fixed;right:800px;top:102px; width: 300px;height:49px" class="font-size-30"
         ng-click="doShowSelectedLanguage();">
        <table>
            <tr>
                <td>
                    <img id="flag" />
                </td>
                <td style="width:100%">
                    <span class="font-size-30" style="color:#fff;font-weight:bold">
                        {{getLanguage()}}
                    </span>
                </td>
                <td style="font-size:30pt;color:#fff">▼</td>
            </tr>
        </table>

    </div>
    <div id="langDropdown" style="position:absolute;display:none;width:300px" class="dropdown">
        <table style="width:100%">
            <tr class="item">
                <td></td>
                <td>
                    <span class="font-size-20" style="color:#fff;font-weight:bold" ng-click="changeLanguage('vn');">
                        {{$$$res('vn','Tiếng Việt','LanguageCode')}}
                    </span>
                </td>
            </tr>
            <tr class="item">
                <td>
                    <img src="/Assets/icons/flag-01.png" />
                </td>
                <td>
                    <span class="font-size-20" style="color:#fff;font-weight:bold" ng-click="changeLanguage('en');">
                        {{$$$res('en','English','LanguageCode')}}
                    </span>
                </td>
            </tr>
        </table>

    </div>
    <script>
        var scope = this;

        scope.getLanguage = function () {
            if (ngW8.$("$lang").$getLanguageCode() == "vn") {
                $("#flag").attr("src", "/Assets/icons/flag-02.png");
                return "Tiếng Việt";
            }
            if (ngW8.$("$lang").$getLanguageCode() == "en") {
                $("#flag").attr("src", "/Assets/icons/flag-01.png");
                return "English";
            }
        }
        scope.changeLanguage = function (code) {
            $("#langDropdown").hide();
            $("#langDropdown").data().HasShow = false;
            ngW8.$("$lang").$setLanguageCode(code);
            ngW8.$("$wslang").$apply(scope);


        };
        scope.doShowSelectedLanguage = function () {
            if (!$("#langDropdown").data().HasShow) {
                $("#langDropdown").appendTo("body");
                $("#langDropdown").css("left", $("#language").position().left + $("#language").width() - $("#langDropdown").width());
                $("#langDropdown").css("top", $("#language").position().top + $("#language").height());
                $("#langDropdown").data().HasShow = true;
                $("#langDropdown").show();

            }
            else {
                $("#langDropdown").hide();
                $("#langDropdown").data().HasShow = false;
            }
        };
        scope.doHideSelectedLanguage = function () {
            $("#langDropdown").hide();
        }

        scope.doLogin = function () {
            if ((angular.isUndefined(scope.UserName)) ||
                (scope.UserName == null) ||
                (scope.UserName == "")) {
                WinRT_ShowMessage(scope.$$$res("MsgEnterUserName", "Xin nhập vào Username"));
                $("#username").focus();
                return;
            }
            if (angular.isUndefined(scope.Password) ||
                (scope.Password == null) ||
                (scope.password == "")) {
                WinRT_ShowMessage(scope.$$$res("MsgEnterPassword", "Xin nhập vào mật khẩu"));
                return;
            }
            scope.isWaiting = true;

            WS.$call("System/Login", { loginModel: { userId: scope.UserName, password: scope.Password } }, function (res) {

                if (res.TokenID == null) {
                    WinRT_ShowMessage(scope.$$$res("LoginFail", "Đăng nhập không thành công (tài khoản không tìm thấy hoặc sai mật khẩu)"));
                }
                else {
                    res.Username = scope.UserName;
                    ngW8.$("$store").$set("UserInfo", res);
                    scope.isWaiting = false;
                    ngW8.$("$loader").$load(scope.$root, "/hubpage/hubpage.html", function (hubScope, ele) {
                        $("body").html("");
                        ele.appendTo($("body")[0]);
                    });

                }
            }, function (error) {
                HideBusy('loginBusy');

            });
        };
        scope.$$$ready(function () {
            scope.$$$res("LoginFail", "Đăng nhập không thành công (sai tài khoản hoặc mật khẩu)");
            scope.$$$res("MsgEnterUserName", "Xin nhập vào Username");
            scope.$$$res("MsgEnterPassword", "Xin nhập vào mật khẩu");
            var x = (($(window).width() - 1366) / 2);
            var y = (($(window).height() - 786) / 2)
            $(".body").css("top", y + 204);
            $(".body").css("left", x + 102);
            $(".top").css("height", ($(window).height() - 400) / 2);
            $("#language").css("top", ((($(window).height() - 400) / 2) - 40) / 2);
            $("#language").css("left", $(window).width() - 400);
            $("#divLogin").css("left", x);
            $("#divLogin").css("top", y);
            $("#language").css("left", 1366 - $("#langDropdown").width() - 102 + x);
            $("#language").css("top", 102 + y);

        });

    </script>
</body>
</html>